<template>
  <div class="register">
    <canvas id="Mycanvas"></canvas>
    <!-- 顶部内容 -->
    <section class="header">
      <div class="flex-between header_box" style="">
        <el-button type="text" @click="toLogin"><h6 >边坡安全风险管控系统平台</h6></el-button>
        <!--        <img src="~@/assets/images/logo.png" alt="">-->
        <p>已有账号？
          <el-button type="text" @click="toLogin" style="color:white">去登录</el-button>
        </p>
      </div>
    </section>

    <div class="box">
      <h6 style="background-color: #0d2234 ;color:#5dfff6">密码找回</h6>
      <el-form ref="form" label-position="right" :model="form" :rules="rulesUnit" label-suffix="：" label-width="120px">

        <el-form-item label="账号" prop="phone">
          <el-input v-model="form.loginName" placeholder="输入账号" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="validCode">
          <div class="form_compact">
            <el-input v-model="form.validCode" placeholder="输入验证码" :maxlength="6"></el-input>
            <el-button type="primary" :disabled="verificationCodeText !== '获取验证码'" @click="queryVerificationCode">
              {{verificationCodeText}}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="form.password" placeholder="输入新密码" type="password" :maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repeat">
          <el-input v-model="form.repeat" placeholder="输入确认密码" type="password" :maxlength="50"></el-input>
        </el-form-item>
      </el-form>
      <span style="margin-top:20px">
          <el-button size="medium"  style="background-color: #1990FE ;color:white" type="success" @click="validatorForm" :loading="isLoading">提交</el-button>
        </span>
    </div>

  </div>
</template>

<script>
import {forgetPassword,sendCodeByLoginName} from '@/services/model/common'
import md5 from 'js-md5'
import canvasInit from "./canvas";
import {CHECK_PASSWORD, CHECK_REPEAT} from "./modules/validator";

// 用户信息缓存
const USER_INFO = 'userInfo'
// 用户当前的操作步骤
const USER_ACTIVE_STEP = 'userActiveStep'

export default {
  data() {
    return {
      // 获取验证码文案
      verificationCodeText: '获取验证码',
      // 单位信息表单 校验规则
      rulesUnit: {
        validCode: {required: true, message: '请输入验证码'},
        password: {required: true, validator: CHECK_PASSWORD},
        repeat: {required: true, validator: CHECK_REPEAT.bind(this)}
      },


      // 用户提交数据表单
      form: sessionStorage.getItem(USER_INFO) ? JSON.parse(sessionStorage.getItem(USER_INFO)) : {},
      // 接口是否正在加载
      isLoading: false
    }
  },
  watch: {
    // 由于表单内容过多，添加session缓存
    form: {
      handler(value) {
        sessionStorage.setItem(USER_INFO, JSON.stringify(value))
      },
      deep: true
    },

  },
  methods: {
    // 获取验证码
    async queryVerificationCode() {
      this.verificationCodeText = 60
      await sendCodeByLoginName({loginName: this.form.loginName})
      // 倒计时
      let timer = () => {
        setTimeout(() => {
          this.verificationCodeText--
          if (this.verificationCodeText > 0) timer()
          else this.verificationCodeText = '获取验证码'
        }, 1000)
      }
      timer()
    },
    // 表单提交
    async submitForm() {
      let {password} = this.form
      password = md5(password)
      let form = {loginName:this.form.loginName,password: password,validCode:this.form.validCode}
      this.isLoading = true
      try {
        await forgetPassword(form)
        this.isLoading = false
        this.form = {}
        this.$confirm('密码修改成功', '提示', {
          confirmButtonText: '去登录',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.toLogin()
        })
      } catch (error) {
        this.isLoading = false
      }
    },
    // 去登录
    toLogin() {
      // 清楚缓存信息
      sessionStorage.removeItem(USER_INFO)
      // 清楚记录的步骤条
      sessionStorage.removeItem(USER_ACTIVE_STEP)
      this.$router.push('/login')
    },
    // 表单校验
    validatorForm () {
      this.$refs.form.validate((valid) => {
        valid && this.submitForm()
      })
    },
  },
  mounted() {
    let canvas = document.getElementById('Mycanvas')
    let context = canvas.getContext('2d')
    canvasInit(canvas, context)
    this.form = {}
  }
}
</script>

<style lang="less" scoped>
  .el-button.el-button--medium {
    margin-top: 20px;
    padding: 10px 16px;
    border-radius: 8px;
    height: 36px;
    min-width: 36px;
    font-weight: 600;
    width: 55%;
    font-size: 17px;
    color: black;
  }

  .el-button--text {
    color: #4caf50;
  }

  #Mycanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background: white !important;
  }
  h6 {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: #1990FE;
    padding: 20px;

  }
  .register {
    position: relative;
    height: 100%;

    .header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 60px;
        background-color: #0d2234 !important;

      .header_box {
        height: 100%;
        margin: 0 auto;
        padding-right: 20px;
  h6 {
      text-align: center;
      font-size: 25px;
      font-weight: 600;
      color: #5dfff6;
      padding: 20px;

    }
    p{
    color: #1990FE;
  }
        img {
          width: 200px;
        }
      }
    }

    .box {
      text-align: -webkit-center;
      position: relative;
      top: 20%;
      margin: 0 auto;
      width: 660px;
      min-height: 400px;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 5px 3px #1990FE;
      border-radius: 8px;
      padding-bottom: 20px;
      animation:  fade_bottom 1.5s;
      @keyframes fade_bottom{
        from {
          transform: translateY(30px);
          opacity: 0.2;
        }
        to {
          transform: translateY(0px);
          opacity: 0.9;
        }
      }

      .box_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      & > h6 {
        text-align: center;
        font-size: 25px;
        font-weight: 600;
        color: white;
        padding: 20px;
        background-color: #1990FE;
      }

      /deep/ .register_step {
        width: 800px;
        padding: 10px 3%;

        .is-simple:not(:last-of-type) .el-step__title {
          max-width: none;
        }

        .el-step__title.is-wait {
          color: #999;
        }

        .el-step__head.is-finish .el-step__icon {
          border-width: 8px;
        }
      }

      .el-form {
        margin-left: -70px;
        margin-top: 30px;
        width: 400px;
      }
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .fade-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
    transform: translateX(-30px);
  }

  .tip {
    font-size: 15px;
    color: #999;
    margin-left: 25px;
    margin-bottom: 20px;

    p {
      line-height: 26px;
    }
  }

  .service_check {
    .el-checkbox {
      margin-right: 10px;
    }

    .service_router {
      color: royalblue;
    }

    .el-button--text {
      color: #228af5;
    }
  }

  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  .el-button {
    padding-right: 40px;
  }
</style>
